// import TableFilterMixin from '@/mixins/TableFilterMixin'
import { Component, toNative } from 'vue-facing-decorator'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import type { FilterDto } from '@/render/FilterRender'
import {
    getKeyToEnum,
    InsuranceAuditStatusCnEnum,
    PayModeCnEnum,
    ProductTypeCnEnum,
    ProductTypeEnum,
    RechargeCheckStatusCnEnum
} from '@/const/enum'
import { exportRecharge, getRechargeRecordList } from '@/api/company'
import type { AnyObject } from '@/types'
import ImageViewButton from '@/components/preview-media/PreviewImage'
import type { RechargeDto } from '@/api/company/types'
import type { JSX } from 'vue/jsx-runtime'
import { downloadFile } from '@/utils/util'
import PreviewImageOrPdf from '@/components/preview-media/PreviewImageOrPdf'
import { Button } from 'ant-design-vue'
@Component
export class PayWageView extends TableRender {
    filterConfig() {
        return {
            companyName: {
                name: '客户名',
                element: 'input'
            },
            status: {
                name: '审核状态',
                element: 'select',
                options: getKeyToEnum(InsuranceAuditStatusCnEnum)
            },
            payMode: {
                name: '充值方式',
                element: 'select',
                options: getKeyToEnum(PayModeCnEnum)
            },
            queryDate: {
                name: '充值时间',
                element: 'datetime',
                type: 'dagerange'
            }
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '客户名',
            width: 200,
            fixed: 'left'
        },
        {
            field: 'productType',
            title: '产品',
            formatter: ({ row }) => {
                return ProductTypeCnEnum[row.productType]
            },
        },
        {
            field: 'status',
            title: '状态',
            params: {
                colors: ['blue-default', 'black', 'red']
            },
            formatter: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                return <div>{RechargeCheckStatusCnEnum[row.status]}</div>
            },
            slots: {
                default: 'color'
            }
        },
        {
            field: 'payMoney',
            title: '充值金额',
            width: 150
        },
        {
            field: 'createTime',
            title: '充值时间',
            width: 150
        },
        {
            field: 'voucherUrl',
            title: '充值凭证',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return <PreviewImageOrPdf src={row.voucherUrl} />
                }
            }
        },
        {
            field: 'bankName',
            title: '收款账户',
            width: 200
        },
        {
            field: 'payMode',
            title: '充值方式',
            formatter: ({ row }) => {
                return PayModeCnEnum[row.payMode]
            }
        },
        {
            field: 'remark',
            title: '备注'
        },
        {
            field: 'salesScenario',
            title: '类型',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return <div>{row.salesScenario === 0 ? '首签' : '续费'}</div>
                }
            }
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            params: {
                buttons: [
                    {
                        text: '查看详情',
                        event: (row: RechargeDto) => this.onToDetail(row)
                    },
                    {
                        text: '付款审核',
                        type: 'danger',
                        event: (row: RechargeDto) => this.onToDetail(row)
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<RechargeDto>

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getRechargeRecordList({
            productType: ProductTypeEnum.PAYWAGE,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    onToDetail(row: RechargeDto) {
        this.$router.push({
            path: `/customer/${row.companyId}`
        })
    }

    async onExport() {
        const params = this.getFilters()
        const res = await exportRecharge({
            companyName: params.companyName,
            productType: ProductTypeEnum.PAYWAGE,
            status: params.status
        })
        downloadFile(res)
    }

    renderRightBtns() {
        return (
            <Button type="primary" onClick={this.onExport}>
                导出
            </Button>
        )
    }

    render() {
        return <div class="h-full">{super.render()}</div>
    }
}

export default toNative(PayWageView)
